<template>
  <div class="login-container">
    <form class="bubble-distribution">
      <h3>打卡登录</h3>
      <div class="accout">
        <input v-model="userName" type="text" placeholder="请输入用户名" required>
        <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/500c1180a96859e5c54a5359f024a397.svg">
      </div>
      <div class="password">
        <input v-model="password" type="password" placeholder="请输入密码(6到20位字符)" pattern="^[\dA-Za-z_]{6,20}$" required>
        <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/4f6f6f316cde4398d201cd67e44ddea3.svg">
      </div>
      <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/ad7fa76844a2df5c03151ead0ce65ea6.svg">
      <ul>
        <li class="password-title">记住密码(测试1):</li>
        <li>
          <input id="rememberPsw" v-model="rememberPsw" type="radio" name="savePsw" value="yes">
          <label for="rememberPsw"  value="yes">是</label>
        </li>
        <li>
          <input id="noRememberPsw" v-model="rememberPsw" type="radio" name="savePsw" value="no">
          <label for="noRememberPsw">否</label>
        </li>
      </ul>
      <button type="button" @click="handleLogin">登录</button>
    </form>
  </div>
</template>

<script>
  // 登录接口
  import { userlogin } from '@/service/login'
  import { useRouter } from 'vue-router';
  import { reactive, toRefs, onMounted  } from 'vue'

  export default {
    name:'login',
    // `setup` 是一个特殊的钩子，专门用于组合式 API。
    setup() {
      onMounted(()=>{
        let userName = sessionStorage.getItem('userName');
        let password = sessionStorage.getItem('password');
        if(userName&&password){
          user.userName = userName
          user.password = password
          user.rememberPsw = 'yes'
        }
      })
      // 路由对象
      const router = useRouter();
      // 用户信息
      const user = reactive({
        userName:'',
        password:'',
        rememberPsw:'no'
      }) 
      // 将 ref 暴露给模板
      const refUser = toRefs(user)

      // 用户方法
      const handleLogin = ()=>{
        let params = {
          ...user
        }
        // 缓存账号密码
        if(user.rememberPsw=='yes'){
          sessionStorage.setItem('userName',user.userName);
          sessionStorage.setItem('password',user.password);
        }else{
          sessionStorage.removeItem('userName');
          sessionStorage.removeItem('password');
        }
        router.push({
          name:'homePage'
        })
      }

      
      return {
        handleLogin,
        ...refUser
      }
    }
  }
</script>

<style lang="scss">
  .login-container{
    display: flex;
    width: 100%;
    height: 100%;
  }
  // focus-within作用于内部表单节点处于聚焦状态的节点
  .bubble-distribution {
    position: relative;
    margin:45% auto;
    padding: 25px;
    border-radius: 2px;
    width: 320px;
    background-color: #f0f0f0;
    h3 {
      font-size: 16px;
      color: #333;
    }
    div {
      margin-top: 10px;
    }
    img {
      position: absolute;
      left: 50%;
      bottom: 100%;
      margin: 0 0 -8px -60px;
      width: 120px;
    }
    ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      padding:0;
      height: 30px;
      line-height: 30px;
      list-style: none;
    }
    .password-title{
      color: #333;
    }
    // 处理按钮的样式
    li {
      position: relative;
      width: 45%;
      transition: all 300ms;
      // 当获取焦点时背景颜色变化
      &:focus-within {
        background: linear-gradient(90deg, #09f 50%, transparent 0) repeat-x,
          linear-gradient(90deg, #09f 50%, transparent 0) repeat-x,
          linear-gradient(0deg, #09f 50%, transparent 0) repeat-y,
          linear-gradient(0deg, #09f 50%, transparent 0) repeat-y;
        background-position: 0 0, 0 100%, 0 0, 100% 0;
        background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
        animation: move 500ms infinite linear;
      }
    }
    // 输入框样式以及校验
    input[type="text"],
    input[type="password"] {
      padding: 10px;
      border: 1px solid #e9e9e9;
      border-radius: 2px;
      width: 100%;
      height: 40px;
      outline: none;
      transition: all 300ms;
      &:focus:valid {
        border-color: #09f;
      }
      &:focus:invalid {
        border-color: #f66;
      }
    }
    // 单选按钮样式清空
    input[type="radio"] {
      position: absolute;
      width: 0;
      height: 0;
      &:checked + label {
        border: 3px solid transparent;
        background-color: #09f;
        color: #fff;
      }
    }
    // 单选按钮样式修改
    label {
      display: block;
      border-bottom: 1px solid #ccc;
      width: 100%;
      color: #333;
      background-clip: padding-box;
      cursor: pointer;
      text-align: center;
      transition: all 300ms;
    }
    // 提交按钮样式
    button {
      margin-top: 10px;
      border: none;
      border-radius: 2px;
      width: 100%;
      height: 40px;
      outline: none;
      background-color: #09f;
      cursor: pointer;
      color: #fff;
      transition: all 300ms;
    }
    .accout,
    .password,
    .code {
      img {
        display: none;
      }
      // 当表单聚焦时，自身的图片显示，其余的图片隐藏
      &:focus-within {
        img {
          display: block;
        }
        // +/~都是作用于当前节点后的同胞节点，但两者有一个明显的区别，+是针对紧随该节点的节点，而~是针对后面所有节点，包括紧随该节点的节点。
        // 失去焦点那么图片隐藏。 默认图片不会，因为默认图片不在作用范围
        & ~ img {
          display: none;
        }
      }
    }
    .code {
      display: flex;
      justify-content: space-between;
      button {
        margin-top: 0;
      }
      input {
        // 这个判断选择器里面有没有输入文本, 也就是说:placeholder已经输入了文字被覆盖了，那么就会启用
        // :not(selector) 选择器匹配每个元素是不是指定的元素/选择器
        // :placeholder-shown CSS 伪类 在 <input> 或 <textarea> 元素显示 placeholder text 时生效
        &:not(:placeholder-shown) {
          width: 70%;
          & + button {
            width: 25%;
          }
        }
        &:placeholder-shown {
          width: 100%;
          & + button {
            width: 0;
            opacity: 0;
          }
        }
      }
    }
    // 这里时处理按钮选中时的离开动画
    @keyframes move {
      to {
        background-position: 6% 0, -6% 100%, 0 -6%, 100% 6%;
      }
    }
  }
</style>
